<template>
  <div class="regis_view">
    <div class="regis">
      <h2 id="title">用户注册</h2>
      <hr>
      <div class="regis_input_div">
        <span class="regis_text">账号:</span>
        <el-input class="number_in" size="large" v-model="input_number" style="width: 240px" placeholder="请输入账号" />
      </div>
      <div class="regis_input_div">
        <span class="regis_text">密码:</span>
        <el-input class="password_in" size="large" v-model="input_password1" style="width: 240px" type="password" placeholder="请输入密码" show-password/>
      </div>
      <div class="regis_input_div">
        <span class="regis_text">确认密码:</span>
        <el-input class="password_in_again" size="large" v-model="input_password2" style="width: 240px" type="password" placeholder="请再次输入密码" show-password/>
      </div>
      <el-radio-group v-model="radio1" class="regis_radio_group">
        <el-radio value="admin" size="large" border>管理员</el-radio>
        <el-radio value="looker" size="large" border>观察员</el-radio>
      </el-radio-group>
      <div class="regis_b_div">
        <el-button @click="regis_b()" id="regis_b" type="primary">注册</el-button>
      </div>
      <el-link @click="to_login()" id="regis_link1" type="success">已有账户？点击登录</el-link>
    </div>
    <a href="https://beian.miit.gov.cn/" target="_blank" class="beian" >备案号占位啊</a>
  </div>
</template>
<script>
import RegisApi from '@/api/RegisApi';
import CryptoJS from 'crypto-js'

export default{
  data(){
    return{
      input_number:"",
      input_password1:"",
      input_password2:"",
      radio1:"manger",
    }
  },
  methods:{
    async  regis_b(){
      //判断必要信息是否空
      if(!this.input_number || !this.input_password1||!this.input_password2){
        this.$message({
          message: '请填写完整信息！',
          type: 'warning'
        });
        return;
      }
      if(this.input_password1!==this.input_password2){
        this.$message({
          message: '两次输入的密码不同',
          type: 'warning'
        });
        return;
      }
      const passwordPattern = /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)[A-Za-z\d]{8,15}$/;
      const accountPattern = /^[A-Za-z0-9_]{6,15}$/;
      if (accountPattern.test(this.input_number)) {
        console.log('账号符合要求');
      } else {
        this.$message({
          message: '账号必须由6-15位字符组成',
          type: 'warning'
        });
        return;
      }
      if (passwordPattern.test(this.input_password1)) {
        this.$message({
          message: '输入合法',
          type: 'success'
        });
      }
      else {
        this.$message({
          message: '密码长度为8-15位,且必须包含大小写字母和数字',
          type: 'warning'
        });
        return;
      }
      //联系后端
      try{
        //密码转成哈希
        const pass_hash=CryptoJS.SHA256(this.input_password1).toString();
        const result = await RegisApi.regis_post(this.input_number,pass_hash,this.radio1);
        if(result.data.status==1001){
            this.$router.push('/')
            this.$message({
            message: '注册成功！请返回登录！',
            type: 'success'
          });
          return;
        }
        else if(result.data.status==1002){
          this.$message({
            message: '已存在该账户名！',
            type: 'warning'
          });
          return;
        }
        else{
          this.$message({
            message: '注册失败！',
            type: 'warning'
          });
          return;
        }
      }catch{
        this.$message({
            message: '运行错误！',
            type: 'error'
          });
          return;
      }
    },
    to_login(){
      //跳转到登录
      this.$router.push('/login');
    },

  }
}
</script>
<style lang="css" scoped src="../styles/regis.css">
</style>
